<template>
  <div ref="chartRef" style="width: 100%; height: 100%"/>
  <Dialog :visible="visible"
    dataChange="4" 
    @close="visible = false" title="参考数据条数">
  </Dialog>
</template>

<script setup>
import { onMounted, watch, nextTick,ref} from "vue";
import {useEcharts} from "../../../../hook/ useEcharts";
import * as echarts from "echarts";
import Dialog from '@/components/Dialog/Dialog.vue'
const props = defineProps(['xdata']);
const {chartRef, initChart, updateChart,setClickHandler} = useEcharts();
const visible = ref(false);

const getOption = () => ({
  tooltip: {
    trigger: 'item',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '2%',
    right: '1%',
    bottom: '10%',
    top: '25%',
    containLabel: true
  },
  legend: {
    data: [ '参考数据调用系统数'],
    right: '0%',
    top: '0%',
    textStyle: {
      color: "#fff"
    },
    itemWidth: 15,
    itemHeight: 10,
    itemGap: 25
  },
  xAxis: {
    type: 'category',
    // data: ['类型一', '类型二', '类型三', '类型四'],
    data: props.xdata.xdata,
    axisLine: {
      lineStyle: {
        color: '#0444AD'
      }
    },
    axisLabel: {
      textStyle: {
        color: "#fff"
      }
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [{
    type: 'value',
    name: "单位：个",
    nameTextStyle: {
      color: "#fff"
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#cdd5e2'
      }
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      textStyle: {
        color: "#fff"
      }
    },
  },
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: '#cdd5e2'
        }
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        formatter: "{value} %", //右侧Y轴文字显示
        textStyle: {
          color: "#fff"
        }
      }
    }
  ],
  series: [
    {
      name: '参考数据调用系统数',
      type: 'bar',
      barWidth: '25px',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#018BFE'
          }, {
            offset: 1,
            color: 'rgba(10, 40, 95, 0.58)'
          }]),
          borderRadius: [12, 12, 0, 0],
        }

      },
      // data: [335, 451, 612, 322, 633, 673, 422, 454, 500]
      data: props.xdata.ydata
    }
  ]
})
// 初始化图表
// initChart(getOption);

// 模拟更新图表数据
const updateData = () => {
  const newOption = {
    series: [],
  };
  updateChart(newOption);
};
watch(() => props.xdata, async (newVal) => {
  await nextTick();
  updateChart(getOption())
},{deep:true});
const handleChartClick = () => {
  visible.value = true
}
onMounted(() => {
  // 初始化图表
  initChart(getOption());
  setClickHandler(handleChartClick)
});

</script>

<style scoped lang="scss">

</style>
